<template>
  <el-container>
    <el-header style="background-color: #005CAA; color: #fff; font-size: 14px; height: 30px;">
      <el-row style="margin: 0; font-size: 13px; height: 30px;">
        <el-col :span="5"></el-col>
        <el-col :span="4"></el-col>
        <el-col style="padding: 0; height: 30px; display: flex; align-items: center;" :span="3">
          选择语言：
          <div style="display: inline-block; cursor: pointer;">中文</div>
          <div style="display: inline-block; padding: 0 5px 0 5px; font-size: 20px;">|</div>
          <div style="display: inline-block; cursor: pointer;">English</div>
        </el-col>
        <el-col :span="3" style="padding-left: 20px; height: 30px; display: flex; align-items: centers;">
          <div style="display: inline-block; cursor: pointer;">快速订购</div>
          <div style="display: inline-block; padding: 0 5px 0 5px; font-size: 20px;">|</div>
          <div style="display: inline-block; cursor: pointer;">联系我们</div>
        </el-col>
        <el-col :span="3">
          <div style="display: flex; justify-content: center; align-items: center; height: 30px; "
            @mouseenter="showQrCode = true" @mouseleave="showQrCode = false">
            <img src="@/assets/WeChat-2.png" alt="" width="20px" style="margin-top: 1px;">
            <span style="display: inline-block; padding-left: 5px;">微信在线联系咨询</span>
            <transition name="el-zoom-in-top">
              <div style="z-index: 1000; position: absolute; top: 0;" v-if="showQrCode">
                <img src="@/assets/test.png" style="width: 200px;"></img>
              </div>
            </transition>
          </div>
        </el-col>
        <el-col :span="5"></el-col>
      </el-row>
    </el-header>

    <!-- 导航条 -->
    <el-row style="height: 50px; background-color: #fff;">
      <el-col :span="5"></el-col>
      <el-col :span="10" style="display: flex; align-items: center; color: #005CAA;">
        <div style="display: inline-block; cursor: pointer;" @click="() => router.push({ path: '/btyindex' })">首页
        </div>
        <div style="display: inline-block; padding: 0 5px 0 5px; font-size: 20px;">|</div>
        <div style="display: inline-block; cursor: pointer;">全部产品</div>
        <div style="display: inline-block; padding: 0 5px 0 5px; font-size: 20px;">|</div>
        <div style="display: inline-block; cursor: pointer;">技术服务</div>
        <div style="display: inline-block; padding: 0 5px 0 5px; font-size: 20px;">|</div>
        <div style="display: inline-block; cursor: pointer;">质料平台</div>
        <div style="display: inline-block; padding: 0 5px 0 5px; font-size: 20px;">|</div>
        <div style="display: inline-block; cursor: pointer;">订购中心</div>
        <div style="display: inline-block; padding: 0 5px 0 5px; font-size: 20px;">|</div>
        <div style="display: inline-block; cursor: pointer;">免费试用</div>
        <div style="display: inline-block; padding: 0 5px 0 5px; font-size: 20px;">|</div>
        <div style="display: inline-block; cursor: pointer;">促销活动</div>
        <div style="display: inline-block; padding: 0 5px 0 5px; font-size: 20px;">|</div>
        <div style="display: inline-block; cursor: pointer;">技术咨询</div>
        <div style="display: inline-block; padding: 0 5px 0 5px; font-size: 20px;">|</div>
        <div style="display: inline-block; cursor: pointer;">关于我们</div>
      </el-col>
      <el-col :span="4" style="display: flex; align-items: center;">
        <el-input v-model="searchContent" class="custom-input">
          <template #append>
            <div style="color: #fff;">搜索</div>
          </template>
        </el-input>
      </el-col>
      <el-col :span="5"></el-col>
    </el-row>
    <el-main class="main">
      <section>
        <router-view v-slot="{ Component }">
          <transition name="slide-fade" mode="out-in">
            <div :key="route.path">
              <component :is="Component"></component>
            </div>
          </transition>
        </router-view>
      </section>
    </el-main>
    <el-footer>Footer</el-footer>
  </el-container>
</template>


<script setup>
import { ref, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();
const showQrCode = ref(false);
const searchContent = ref();


</script>

<style scoped>
.custom-input {
  max-width: 200px;
  border-radius: 0;
}

:deep(.el-input__wrapper) {
  height: 25px;
  padding: 0;
  border-radius: 0;
}

:deep(.el-input__inner) {
  height: 23px;
  padding: 0;
  color: #333;
  line-height: 23px;
  border-radius: 0;
  border-left: 1px solid #005CAA;
  border-top: 1px solid #005CAA;
  border-bottom: 1px solid #005CAA;
}

:deep(.el-input-group__append) {
  height: 25px;
  line-height: 25px;
  background-color: #005CAA;
  color: white;
  font-size: 13px;
  border-radius: 0;
}


.el-header,
.el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  height: 30px;
  line-height: 30px;
  padding: 0;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  margin-top: 10px;
  padding: 0;
}
</style>
